<template>
  <div class="video-container">
    <video ref="videoPlayer" controls :style="{ width: videoWidth, height: videoHeight }">
      <source :src="require(`@/assets/video/${currentVideoUrl}`)" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</template>

<script>
import http from '@/plugins/http';

export default {
  props: {
    productId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      currentVideoUrl: '', // 当前视频的 URL
      videoWidth: '300px', // 初始化视频宽度
      videoHeight: '300px' // 初始化视频高度
    };
  },
  methods: {
    fetchVideo(productId) {
      console.log("id:"+productId)
      http.get(`/product/${productId}`)
          .then(response => {
            const product = response.data || {};
            console.log("product:"+product)
            this.currentVideoUrl=product.videoUrl
          })
          .catch(error => {
            console.error("获取商品信息出错:", error);
          });
    }
  },
  activated() {
    if (this.productId) {
      // 获取商品关联的视频信息
      this.fetchVideo(this.productId);
    } else {
      console.error("未找到商品ID");
    }
  }
};
</script>

<style scoped>
.video-container {
  width: 100%;
  max-width: 600px; /* 控制视频容器的最大宽度 */
  margin: 20px auto; /* 居中显示 */
}

video {
  display: block; /* 确保视频元素是块级元素 */
  width: 100%; /* 填充父容器宽度 */
  height: auto; /* 自适应高度 */
}
</style>
